import React, {useEffect} from 'react';
import classes from './index.module.scss'
import backImg from '../../../assets/backgroundImg.png'
import loginBg from '../../../assets/login.png'
import logo from '../../../assets/logo192.png'
import {Button, Card, Form, Input} from "antd";
import {useDispatch, useSelector} from "react-redux";
import {adminLogin} from "../../../store/backStage/adminLoginSlice";
import {useNavigate} from "react-router-dom";
import {getAdminToken} from "../../../utils/adminToken";

const AdminLogin = () => {

    const dispatch = useDispatch()
    const nav = useNavigate()
    const adminToken = getAdminToken()
    const {admin_token} = useSelector(state => state.persistedReducer.adminLogin)

    useEffect(() => {
        if (admin_token) {
            setTimeout(() => {
                nav('/admin')
            }, 500)
        }
    }, [admin_token])

    const onFinish = (adminInfo) => {
        dispatch(adminLogin({adminInfo}))
    };


    return (
        <div style={{backgroundImage: `url(${backImg})`}} className={classes.Container}>
            <Card bodyStyle={{width: '100%', height: '100%'}} className={classes.LoginBox}>
                <div className={classes.Box}>
                    <img alt="" src={loginBg} style={{width: '50%', height: '100%'}}></img>
                    <div className={classes.Login}>
                        <h1>Admin Work</h1>
                        <img width={150} src={logo} alt=""/>
                        <Form
                            name="basic"
                            labelCol={{span: 4}}
                            wrapperCol={{span: 18}}
                            style={{minWidth: 600, paddingTop: 30, paddingBottom: 120}}
                            onFinish={onFinish}
                            autoComplete="off"
                        >
                            <Form.Item
                                label="账号"
                                name="account"
                                rules={[{required: true, message: '请输入账号!',}]}
                            >
                                <Input/>
                            </Form.Item>

                            <Form.Item
                                label="密码"
                                name="password"
                                rules={[{required: true, message: '请输入密码!'}]}
                            >
                                <Input.Password/>
                            </Form.Item>


                            <Form.Item
                                wrapperCol={{
                                    offset: 11,
                                    span: 16,
                                }}
                            >
                                <Button size="large" type="primary" htmlType="submit">
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </Card>
        </div>
    );
};

export default AdminLogin;